<template>
  <div>
    <!-- 套餐列表 -->
    <FilterTable
      ref="setMealTable"
      :height="260"
      :columns="setMealTableColumns"
      columnsRef="partPartInfoManagePartInfoSetMealStrycture"
      :fetchapi="topFetchapi"
      :datakey="'rows'"
      :params="topFetchParams"
      :onEnterEvent="handleTableEnterEvent"
      :onColumnsChange="columns => (this.setMealTableColumns = columns)"
    ></FilterTable>
    <!-- 套餐详细 -->
    <div style="margin-top: 15px;">
      <FilterTable
        ref="partDetalTable"
        :columns="partDeTalTableColumns"
        columnsRef="partPartInfoManagePartInfoSetMealStrycture1"
        :fetchapi="bottomFetchapi"
        :datakey="'rows'"
        :params="bottomFetchParams"
        :onColumnsChange="columns => (this.partDeTalTableColumns = columns)"
      ></FilterTable>
    </div>
    <div class="bottomBtnWrap">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { queryAllSetMeal, quryPartBySetMealId } from '@/api/part/partInfoManage/partInfo';

export default {
  data() {
    return {
      setMealTableColumns: this.createSetMealTableColumns(),
      partDeTalTableColumns: this.createdPartDetailColumns(),
      topFetchapi: queryAllSetMeal,
      bottomFetchapi: quryPartBySetMealId,
      topFetchParams: { xhrAbort: false },
      bottomFetchParams: { xhrAbort: true }
    };
  },
  created() {},
  methods: {
    createSetMealTableColumns() {
      return [
        {
          title: '套餐代码',
          dataIndex: 'tcCode'
        },
        {
          title: '累计限购量',
          dataIndex: 'discountRate'
        },
        {
          title: '有效日期起始',
          dataIndex: 'begDate'
        },
        {
          title: '有效日期截止',
          dataIndex: 'endDate'
        },
        {
          title: '单次购买数量起',
          dataIndex: 'minCount'
        },
        {
          title: '单次购买数量止',
          dataIndex: 'maxCount'
        }
      ];
    },
    createdPartDetailColumns() {
      return [
        {
          title: '套餐代码',
          dataIndex: 'tcCode',
          showOverflowTooltip: true
        },
        {
          title: '配件代码',
          dataIndex: 'partNo'
        },
        {
          title: '配件数量',
          dataIndex: 'inCount'
        },
        {
          title: '配件名称',
          dataIndex: 'partName'
        },
        {
          title: '配件优惠率',
          dataIndex: 'discountRate'
        }
      ];
    },
    // 双击顶部table行项
    handleTableEnterEvent(e) {
      this.bottomFetchParams.xhrAbort = true;
      this.bottomFetchParams = Object.assign(this.bottomFetchParams, {
        tcCode: e.tcCode,
        xhrAbort: false
      });
    },
    // 点击关闭
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.bottomBtnWrap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-top: 1px solid #e9e9e9;
  padding: 10px 20px;
  background: #fff;
  text-align: right;
}
</style>
